<template>
  <div
    class="echarts"
    ref="echartsRef"
    :style="{
      width: '460px',
      height: '500px',
    }"
  ></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import userCount from "@/stores/userCount";
import { storeToRefs } from "pinia";
import * as echarts from "echarts";
export default defineComponent({
  setup() {
    const store = userCount();
    const { dataInfo } = storeToRefs(store);

    const data = ref(dataInfo);
    /*   console.log(data)
      console.log(data.value.countMonth) */
    const echartsRef = ref<HTMLElement>();
    onMounted(() => {
      //初始化echarts实例init（ dom ，'主题' ，其余参数如：{ renderer:'svg' }）
      const myEcharts = echarts.init(echartsRef.value!);
      //要操作的配置
      const option = {
        title: {
          text: "待办情况统计",
          left: "center",
        },
        // 配置提示信息
        tooltip: {},

        dataset: {
          source: [
            ["product", "已完成", "总量", ""],
            ["当天", data.value.doneDay, data.value.countDay],
            ["本周", data.value.doneWeek, data.value.countWeek],
            ["当月", data.value.doneMonth, data.value.countMonth],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };
      //设置配置
      myEcharts.setOption(option);
    });

    return { echartsRef };
  },
});
</script>

<style scoped></style>
